<template>
  <div class="admin-home">
    <div class="container mx-auto px-4 py-6">
      <!-- 欢迎区域 -->
      <div class="welcome-section mb-8">
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-6 text-white">
          <h1 class="text-2xl font-bold mb-2">管理员工作台</h1>
          <p class="text-indigo-100">今天是 {{ formatToday() }}，系统运行正常</p>
        </div>
      </div>

      <!-- 系统数据统计 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">总用户数</p>
              <p class="text-3xl font-bold text-blue-600">{{ stats.totalUsers }}</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-users text-blue-600"></i>
            </div>
          </div>
          <p class="text-xs text-gray-500 mt-2">比上月 +{{ stats.userGrowth }}%</p>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">活跃案件</p>
              <p class="text-3xl font-bold text-green-600">{{ stats.activeCases }}</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-briefcase text-green-600"></i>
            </div>
          </div>
          <p class="text-xs text-gray-500 mt-2">今日新增 {{ stats.todayNewCases }}</p>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">系统监控</p>
              <p class="text-3xl font-bold text-orange-600">{{ stats.systemHealth }}%</p>
            </div>
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-server text-orange-600"></i>
            </div>
          </div>
          <p class="text-xs text-green-500 mt-2">运行正常</p>
        </div>
        
        <div class="bg-white rounded-lg p-6 shadow-md">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-600 text-sm">月收入</p>
              <p class="text-3xl font-bold text-purple-600">{{ formatMoney(stats.monthlyRevenue) }}</p>
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
              <i class="fas fa-chart-line text-purple-600"></i>
            </div>
          </div>
          <p class="text-xs text-gray-500 mt-2">比上月 +{{ stats.revenueGrowth }}%</p>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- 系统状态 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">系统状态</h2>
          </div>
          <div class="p-6">
            <div class="space-y-4">
              <div v-for="service in systemServices" :key="service.name" class="flex items-center justify-between">
                <div class="flex items-center">
                  <div :class="service.status === 'online' ? 'bg-green-500' : 'bg-red-500'" class="w-3 h-3 rounded-full mr-3"></div>
                  <span class="text-gray-800">{{ service.name }}</span>
                </div>
                <div class="flex items-center space-x-2">
                  <span class="text-sm text-gray-500">{{ service.uptime }}</span>
                  <span :class="service.status === 'online' ? 'text-green-600' : 'text-red-600'" class="text-xs font-medium">
                    {{ service.status === 'online' ? '正常' : '异常' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 最近活动 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">最近活动</h2>
          </div>
          <div class="p-6">
            <div class="space-y-4">
              <div v-for="activity in recentActivities" :key="activity.id" class="flex items-start">
                <div :class="getActivityIcon(activity.type)" class="w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                  <i :class="activity.icon" class="text-sm"></i>
                </div>
                <div class="flex-1">
                  <p class="text-sm text-gray-800">{{ activity.description }}</p>
                  <p class="text-xs text-gray-500">{{ formatDateTime(activity.timestamp) }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 待办事项 -->
        <div class="bg-white rounded-lg shadow-md">
          <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-bold text-gray-800">待办事项</h2>
          </div>
          <div class="p-6">
            <div class="space-y-3">
              <div v-for="task in adminTasks" :key="task.id" class="p-3 bg-gray-50 rounded-lg">
                <div class="flex justify-between items-start mb-2">
                  <h4 class="font-medium text-gray-800">{{ task.title }}</h4>
                  <span :class="getPriorityClass(task.priority)" class="text-xs px-2 py-1 rounded">
                    {{ getPriorityText(task.priority) }}
                  </span>
                </div>
                <p class="text-sm text-gray-600">{{ task.description }}</p>
                <p class="text-xs text-gray-500 mt-1">截止：{{ formatDate(task.deadline) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 管理功能 -->
      <div class="mt-8">
        <h2 class="text-lg font-bold text-gray-800 mb-4">管理功能</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-7 gap-4">
          <router-link to="/admin/statistics" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-chart-bar text-blue-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">数据统计</h3>
          </router-link>
          
          <router-link to="/admin/cases" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-folder-open text-teal-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">案件信息管理</h3>
          </router-link>
          
          <router-link to="/admin/lawyer-cases" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-user-tie text-cyan-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">律师案件管理</h3>
          </router-link>
          
          <router-link to="/admin/cases/library" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-folder text-green-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">案例库</h3>
          </router-link>
          
          <router-link to="/admin/lawyers" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-user-tie text-purple-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">律师管理</h3>
          </router-link>
          
          <router-link to="/admin/clients" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-users text-indigo-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">客户管理</h3>
          </router-link>
          
          <router-link to="/admin/business" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-cogs text-orange-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">业务管理</h3>
          </router-link>
          
          <router-link to="/admin/points" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-star text-red-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">积分管理</h3>
          </router-link>
          
          <router-link to="/admin/overdue-reminder" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-bell text-orange-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">超期提醒</h3>
          </router-link>
          
          <router-link to="/admin/electronic-banner" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-award text-pink-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">电子锦旗</h3>
          </router-link>
          
          <router-link to="/admin/case-review-process" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-tasks text-purple-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">案件审查流程</h3>
          </router-link>
          
          <router-link to="/admin/case-auto-demo" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-play-circle text-green-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">自动入库演示</h3>
          </router-link>
          
          <router-link to="/admin/logs" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-file-alt text-yellow-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">日志管理</h3>
          </router-link>
          
          <router-link to="/admin/knowledge" class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-brain text-indigo-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">知识管理</h3>
          </router-link>
          
          <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center cursor-pointer" @click="systemMaintenance">
            <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3">
              <i class="fas fa-tools text-gray-600"></i>
            </div>
            <h3 class="font-medium text-gray-800">系统维护</h3>
          </div>
        </div>
      </div>

      <!-- 系统性能概览 -->
      <div class="mt-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-lg font-bold text-gray-800 mb-4">服务器性能</h2>
            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <span class="text-gray-600">CPU 使用率</span>
                <div class="flex items-center">
                  <div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
                    <div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div>
                  </div>
                  <span class="text-sm font-medium">45%</span>
                </div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-gray-600">内存使用率</span>
                <div class="flex items-center">
                  <div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
                    <div class="bg-green-600 h-2 rounded-full" style="width: 62%"></div>
                  </div>
                  <span class="text-sm font-medium">62%</span>
                </div>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-gray-600">磁盘使用率</span>
                <div class="flex items-center">
                  <div class="w-32 bg-gray-200 rounded-full h-2 mr-2">
                    <div class="bg-orange-600 h-2 rounded-full" style="width: 78%"></div>
                  </div>
                  <span class="text-sm font-medium">78%</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-lg font-bold text-gray-800 mb-4">数据库状态</h2>
            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <span class="text-gray-600">连接数</span>
                <span class="font-medium">45/100</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-gray-600">查询性能</span>
                <span class="font-medium text-green-600">98.5ms</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-gray-600">存储空间</span>
                <span class="font-medium">2.3GB / 10GB</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-gray-600">备份状态</span>
                <span class="font-medium text-green-600">正常</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import dayjs from 'dayjs'

export default {
  name: 'AdminHome',
  setup() {
    // 交通事故案件管理统计
    const stats = ref({
      totalUsers: 2156,  // 交通事故当事人用户
      userGrowth: 18.5,  // 交通事故当事人增长率
      activeCases: 156,  // 活跃交通事故案件
      todayNewCases: 12, // 今日新增交通事故案件
      systemHealth: 99,
      monthlyRevenue: 856300, // 交通事故案件月收入
      revenueGrowth: 22.8
    })
    
    const systemServices = ref([
      { name: 'Web 服务器', status: 'online', uptime: '99.9%' },
      { name: '数据库', status: 'online', uptime: '99.8%' },
      { name: 'API 服务', status: 'online', uptime: '99.7%' },
      { name: '文件存储', status: 'online', uptime: '99.9%' },
      { name: '缓存服务', status: 'online', uptime: '99.6%' }
    ])
    
    // 交通事故案件管理活动
    const recentActivities = ref([
      {
        id: 1,
        type: 'case',
        icon: 'fas fa-car-crash',
        description: '严重交通事故案件录入：沪 C88976 追尾事故',
        timestamp: '2024-02-16 16:30:00'
      },
      {
        id: 2,
        type: 'report',
        icon: 'fas fa-clipboard-check',
        description: '伤残鉴定报告审核完成：九级伤残认定',
        timestamp: '2024-02-16 15:45:00'
      },
      {
        id: 3,
        type: 'insurance',
        icon: 'fas fa-shield-alt',
        description: '保险理赔审核：平安保险 15万元理赔方案',
        timestamp: '2024-02-16 14:20:00'
      },
      {
        id: 4,
        type: 'user',
        icon: 'fas fa-user-injured',
        description: '交通事故当事人注册：张先生',
        timestamp: '2024-02-16 13:15:00'
      },
      {
        id: 5,
        type: 'consultation',
        icon: 'fas fa-gavel',
        description: '专业律师咨询预约：李卫民律师',
        timestamp: '2024-02-16 11:30:00'
      }
    ])
    
    // 交通事故案件管理待办事项
    const adminTasks = ref([
      {
        id: 1,
        title: '重大交通事故案件审核',
        description: '审核世纪大道多车连环追尾事故，涉及赔偿金额超100万',
        deadline: '2024-02-20',
        priority: 'high'
      },
      {
        id: 2,
        title: '伤残鉴定报告复核',
        description: '复核华东政法司法鉴定中心出具的伤残鉴定报告',
        deadline: '2024-02-18',
        priority: 'high'
      },
      {
        id: 3,
        title: '保险理赔方案审批',
        description: '审批平安保险提交的交通事故理赔方案',
        deadline: '2024-02-19',
        priority: 'medium'
      },
      {
        id: 4,
        title: '交通事故案例库更新',
        description: '更新本月典型交通事故案例到案例库',
        deadline: '2024-02-25',
        priority: 'medium'
      },
      {
        id: 5,
        title: '交通事故数据统计报告',
        description: '编制本月交通事故案件数据统计分析报告',
        deadline: '2024-02-28',
        priority: 'low'
      }
    ])
    
    const formatToday = () => {
      return dayjs().format('YYYY年MM月DD日 dddd')
    }
    
    const formatDate = (date) => {
      return dayjs(date).format('MM-DD')
    }
    
    const formatDateTime = (date) => {
      return dayjs(date).format('MM-DD HH:mm')
    }
    
    const formatMoney = (amount) => {
      return '￥' + amount.toLocaleString()
    }
    
    const getActivityIcon = (type) => {
      const iconMap = {
        user: 'bg-blue-100 text-blue-600',
        case: 'bg-green-100 text-green-600',
        system: 'bg-orange-100 text-orange-600',
        payment: 'bg-purple-100 text-purple-600'
      }
      return iconMap[type] || 'bg-gray-100 text-gray-600'
    }
    
    const getPriorityClass = (priority) => {
      const classes = {
        high: 'bg-red-100 text-red-800',
        medium: 'bg-yellow-100 text-yellow-800',
        low: 'bg-green-100 text-green-800'
      }
      return classes[priority] || 'bg-gray-100 text-gray-800'
    }
    
    const getPriorityText = (priority) => {
      const texts = {
        high: '紧急',
        medium: '中等',
        low: '低级'
      }
      return texts[priority] || '普通'
    }
    
    const systemMaintenance = () => {
      alert('系统维护功能开发中...')
    }
    
    return {
      stats,
      systemServices,
      recentActivities,
      adminTasks,
      formatToday,
      formatDate,
      formatDateTime,
      formatMoney,
      getActivityIcon,
      getPriorityClass,
      getPriorityText,
      systemMaintenance
    }
  }
}
</script>

<style scoped>
.admin-home {
  padding: 20px 0;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 20px;
}

.home-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 